<!-- 专栏管理 -->
<template>
  <div class="app-container">
    <div>
      <router-link to="/university/lesson">
        <el-button type="text" icon="el-icon-arrow-left" size="default">返回</el-button>
      </router-link>
    </div>
    <el-form :inline="true" size="small">
      <el-form-item label="分类编号">
        <el-input v-model="modelId" placeholder="请输入分类编号" size="small"></el-input>
      </el-form-item>
      <el-form-item label="分类名称">
        <el-input v-model="modelName" placeholder="请输入分类名称" size="small"></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" type="primary" size="small" @click>搜索</el-button>
      <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
      <el-button icon="el-icon-edit" type="warning" size="small" @click>新增</el-button>
      <el-button icon="el-icon-delete" type="danger" size="small" @click>删除</el-button>
    </el-form>

        <router-link to="/university/exleMode">
          <el-button type="primary" icon="el-icon-document-copy" size="small">专栏分类管理</el-button>
        </router-link>
    <div style="margin-top:20px">
      <el-table :data="cate_list" border stripe>
        <el-table-column type="selection" align="center" width="60" />
        <template v-for="(col, index) in columns">
          <el-table-column
            :prop="col.data"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          ></el-table-column>
        </template>
        <el-table-column label="操作" align="center" width="170">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              style="color:#F56C6C;"
              @click="deleteCate(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="pageData.page"
        :page-sizes="[20, 40, 80, 100]"
        :page-size="pageData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      />
    </div>

    <!-- 添加分栏 -->
    <el-dialog title="添加分栏" :visible.sync="showAdd" width="40%" @close="showAdd = false" >
      <el-form
        :model="cData"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="false"
        size="normal"
        class="dform"
      >
        <el-form-item label="专栏编号">
          <el-input v-model="cData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="专栏名称">
          <el-input v-model="cData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="专栏封面">
           <el-upload
            action
            :file="cData.name"
            :before-upload="beforeCoverUpload"
            list-type="picture-card"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="专栏Banner">
           <el-upload
            action
            :file="cData.name"
            :before-upload="beforeCoverUpload"
            list-type="picture-card"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否推荐至护肤大学首页">
          <el-input v-model="cData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属级别">
          <el-input v-model="cData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="专家名称">
          <el-input v-model="cData.brief" clearable></el-input>
        </el-form-item>
        <el-form-item label="观看次数">
          <el-input v-model="cData.tagPrice" clearable></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="cData.salePrice" clearable></el-input>
        </el-form-item>
        <el-form-item label="分销商佣金比例">
          <el-input v-model="cData.sortOrder" type="number" step="false"></el-input>
        </el-form-item>
        <el-form-item label="试听视频">
          <el-upload
            action
            :file="cData.cover"
            :before-upload="beforeCoverUpload"
            list-type="picture-card"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click>提交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  createCategory,
  categoryDetail,
  updateCategory,
  deleteCategory,
  categoryList
} from "@/api/article";
export default {
  data() {
    return {
      activeName: "first",
      modelId: "",
      modelName: "",
      msgApi: "",
      cData: {
      },
      showAdd: false,
      showEdit: false,
      showDetail: false,
      rules: {},
      i: "", //cate_id
      updateData: {
      },
      pageData: {
        page: 1,
        limit: 10
      },
      total: 10,
      cate_list: [],
      columns: [
        { key: 0, label: `专栏编号`, data: "id", width: 80 },
        { key: 1, label: `专栏名称`, data: "name"  },
        { key: 2, label: `专栏海报`, data: "cover"  },
        { key: 3, label: `是否推荐至护肤大学首页`, data: "inHome"  },
        { key: 4, label: `所属级别`, data: "level"  },
        { key: 5, label: `所属分类`, data: "type"  },
        { key: 6, label: `专家名称`, data: "exName"  },
        { key: 7, label: `观看次数`, data: "count"  },
        { key: 8, label: `收费规则`, data: "mode"  },
        { key: 9, label: `试听视频`, data: "audio" }
      ]
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    getCategoryList() {
      categoryList().then(r => {
        if (r.code == "200") {
          this.cate_list = r.data.rows;
          console.log(this.cate_list);
        } else {
          this.$message.error(r.msg);
        }
      });
    },
    add() {
         this.showAdd = true;
    },
    edit(i) {
      this.showAdd = true;
      this.updateData = this.cate_list[i];
    },
    detail(i) {
      console.log(i);
      this.i = i;
      this.showDetail = true;
    },
    createCategory() {
      createCategory(this.cData).then(r => {});
    },
    getCategoryDetail() {
      categoryDetail().then(r => {
        console.log(r);
      });
    },
    updateCategory(i) {
      updateCategory(this.updateData).then(r => {
        console.log(r);
      });
    },
    deleteCate(i) {
      deleteCategory(this.cate_list[i].id).then(r => {
        console.log(r);
      });
    },
    beforeCoverUpload() {},

    sizeChange(a) {
      this.pageData.limit = a;
      this.getCategoryList();
    },
    currentChange(a) {
      this.pageData.page = a;
      this.getCategoryList();
    }
  }
};
</script>
<style>
.sok {
  color: #5cb87a;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #5cb87a;
  background: #fff;
  border-radius: 5px;
}
.sfail {
  color: #f56c6c;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #f56c6c;
  background: #fff;
  border-radius: 5px;
}
.btnBox {
  height: 130px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.btnBox .el-button {
  margin: 0;
}
.detailLog div {
  margin: 10px;
  color: #000;
  font-size: 16px;
}
.detailLog .dbox {
  display: flex;
  flex-wrap: wrap;
}
.detailLog .dbox > div {
  width: 46%;
  margin: 10px 0;
}
.dform .el-input{
    width: 220px;
}
</style>
